<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <div>
        <!-- 表格 -->
        <c-table ref="roleTable" :api-interface="getRoleList" :open-page="false">
            <!-- 查询条件 -->
            <template v-slot:headerFormItem="">
                <a-form-item label="角色名称">
                    <a-input style="width: 300px;" type="text" autocomplete="off" v-decorator="[ 'roleName',{ initialValue : roleName } ]" />
                </a-form-item>
            </template>
            <!-- 操作按钮 -->
            <template v-slot:headerOperators="">
                <a-button icon="plus" type="primary" @click="clickAddRoleButton">添加</a-button>
            </template>
            <!-- 列 -->
            <template v-slot:columns="">
                <a-table-column title="编号" dataIndex="id" :align="'center'" />
                <a-table-column title="名称" dataIndex="roleName" :align="'center'" />
                <a-table-column title="描述" dataIndex="roleDescribe" :align="'center'" />
                <a-table-column title="创建时间" dataIndex="createTime" :align="'center'" />
                <a-table-column title="最后修改时间" dataIndex="lastModifyTime" :align="'center'" />
                <a-table-column title="操作" :align="'center'">
                    <template slot-scope="record">
                        <a href="javascript:void(0);" @click="clickAuthoritiesButton(record)">配置权限</a>
                        <a-divider type="vertical" />
                        <a href="javascript:void(0);" @click="clickEditRoleButton(record)">修改</a>
                        <a-divider type="vertical" />
                        <a href="javascript:void(0);" @click="clickDeleteRoleButton(record)">删除</a>
                    </template>
                </a-table-column>
            </template>
        </c-table>
        <!-- 表单 -->
        <c-form-modal ref="roleFormModal">
            <template v-slot:formItem="">
                <!-- 角色名称 -->
                <a-form-item label="角色名称">
                    <a-input type="text"
                             autocomplete="off"
                             v-decorator="[ 'roleName',{ rules: [
                                { required: true, message: '请输入角色名称' },
                                { min:2, message:'长度为3-20个字符' },
                                { max:20, message:'长度为3-20个字符' },
                             ]}]"
                    />
                </a-form-item>
                <!-- 角色描述 -->
                <a-form-item label="角色描述">
                    <a-textarea autocomplete="off"
                            v-decorator="[ 'roleDescribe',{
                            initialValue : '',
                                rules: [
                                    { min:0, message:'长度为0-100个字符' },
                                    { max:100, message:'长度为0-100个字符' },
                                 ]
                             }]"
                    />
                </a-form-item>
            </template>
        </c-form-modal>
        <!-- 配置权限 -->
        <c-drawer ref="authoritiesDrawer" title="配置权限">
            <!-- 角色信息 -->
            <a-descriptions layout="horizontal" :column="1" :colon="true">
                <a-descriptions-item label="编号">{{ selectedRole['id'] }}</a-descriptions-item>
                <a-descriptions-item label="名称">{{ selectedRole['roleName'] }}</a-descriptions-item>
                <a-descriptions-item label="描述">{{ selectedRole['roleDescribe'] }}</a-descriptions-item>
                <a-descriptions-item label="权限">
                    <div style="display: flex;">
                        <!-- 树 -->
                        <a-tree checkable
                                :selectable="false"
                                :tree-data="treeDataSource"
                                :replace-fields="{ children : 'children',title : 'name',key : 'permission' }"
                                :checked-keys="selectedRoleAuthorities"
                                @check="keys => this.selectedRoleAuthorities = keys"
                        />
                    </div>
                </a-descriptions-item>
            </a-descriptions>
            <a-button type="primary" @click="clickSaveAuthoritiesButton" block>保存</a-button>
        </c-drawer>
    </div>
</template>

<script>
    import { getRoleList,addRole,editRole,deleteRole,getPowerListTree,getRoleAuthorities,editRoleAuthorities } from '@/apis/upms';
    import CTable from '@/components/table/CTable';
    import CFormModal from '@/components/form/CFormModal';
    import CDrawer from '@/components/drawer/CDrawer';
    export default {
        components : {
            CTable,
            CFormModal,
            CDrawer,
        },
        props : {
            roleName : { type : String,default : '' },
        },
        data(){
            return {
                //  查询表单
                queryForm : this.$form.createForm(this),
                //  权限树数据
                treeDataSource : [],
                //  选中的角色
                selectedRole : {},
                //  选中角色的权限列表
                selectedRoleAuthorities : [],
            };
        },
        mounted(){
            let $this = this;
            getPowerListTree().then(res => $this.treeDataSource = res.data);
        },
        methods : {
            getRoleList,
            //  点击添加角色按钮
            clickAddRoleButton : function (e) {
                e.preventDefault();
                let $this = this;
                //  打开弹窗
                $this.$refs['roleFormModal'].open({
                    title : '添加角色',
                    apiInterface : addRole,
                    callbackFn : () => {
                        $this.$refs['roleTable'].getDataList();
                        $this.$message.success("添加成功");
                    },
                    data : {}
                });
            },
            //  点击修改角色按钮
            clickEditRoleButton : function (params) {
                let $this = this;
                //  打开弹窗
                $this.$refs['roleFormModal'].open({
                    title : '修改角色',
                    apiInterface : editRole,
                    callbackFn : () => {
                        $this.$refs['roleTable'].getDataList();
                        $this.$message.success("保存成功");
                    },
                    data : { ...params }
                });
            },
            //  点击删除角色按钮
            clickDeleteRoleButton : function (params) {
                let $this = this;
                $this.$modal.confirm({
                    title : '删除角色',
                    content : '确认删除【' + params['roleName'] + '】',
                    onOk : () =>  deleteRole(params['id']).then(() => {
                        $this.$refs['roleTable'].deleteDataItem(params);
                        $this.$message.success("删除成功");
                    })
                });
            },
            //  点击配置权限按钮
            clickAuthoritiesButton : function (params) {
                let $this = this;
                //  复制字段
                $this.selectedRole = params;
                //  清空角色的权限列表
                $this.selectedRoleAuthorities.splice(0,$this.selectedRoleAuthorities.length);
                //  获取角色的权限列表
                getRoleAuthorities(params['id']).then(res => res.data.forEach(item => $this.selectedRoleAuthorities.push(item)));
                $this.$refs['authoritiesDrawer'].open();
            },
            //  点击保存权限配置按钮
            clickSaveAuthoritiesButton : function (e) {
                e.preventDefault();
                let $this = this;
                editRoleAuthorities($this.selectedRole['id'],$this.selectedRoleAuthorities).then(() => {
                    $this.$message.success("保存成功");
                    //  关闭抽屉
                    $this.$refs['authoritiesDrawer'].close(e);
                });
            }
        }
    }
</script>
